<template>
  <div>
    <h1>萤火商城</h1>
    <h2>注册页</h2>
    <!-- 注册 -->
    <van-row type="flex" justify="center">
      <van-col span="20">
        <van-form @submit="register">
          <van-field
            v-model="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ pattern, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ pattern, message: '请填写密码' }]"
          />
          <van-field
            v-model="password1"
            type="password"
            label="确认密码"
            placeholder="请输入确认密码"
            :rules="[{ pattern, message: '请填写密码' }]"
          />
          <p class="reg" @click="gologin">返回登录页</p>
          <!-- 按钮 -->
          <van-button color="#ff6700" block>注册</van-button>
        </van-form>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      username: "",
      password: "",
      password1: "",
      pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]+[\u4E00-\u9FA5A-Za-z0-9_ ]+$/,
    };
  },
  methods: {
    gologin() {
      this.$router.push({
        path: "/",
      });
    },
    register() {
      this.$axios
        .get("/users?username=" + this.username)
        .then((res) => {
          if (
            this.username.length != 0 &&
            this.password.length != 0 &&
            this.password1.length != 0
          ) {
            if (res.data.length == 0) {
              // 没有该用户，则允许注册
              // 实现注册的逻辑
              if (this.password != this.password1) {
                this.$toast("两次输入的密码不一样!");
              } else {
                let data = {
                  username: this.username,
                  password: this.password,
                  ad: "用户",
                };
                //   这种情况允许注册
                this.$axios
                  .post("/users", data)
                  .then((res) => {
                    if (res.statusText == "Created") {
                      this.$dialog
                        .alert({
                          title: "提示",
                          message: "注册成功!请登录",
                        })
                        .then(() => {
                          this.$router.push("/");
                        });
                    }
                  })
                  .catch((err) => {
                    console.log(err);
                  });
              }
            } else {
              this.$dialog({ message: "该用户名已经存在,不允许注册!" });
              this.username = "";
              this.password = "";
              this.password1 = "";
            }
          } else {
            this.$dialog({ message: "用户名或密码不能为空!" });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style  scoped>
/* 标题 */
h1 {
  text-align: center;
  font-size: 50px;
  color: #ff6700;
  margin-top: 120px;
}
/* 标题2 */
h2 {
  text-align: center;
  font-size: 45px;
  color: #ff6700;
}
/* 提示 */
.reg {
  text-align: center;
  color: #ff6700;
}
</style>